{% extends 'base.html' %}
{% load static %}

{% block title %}成就系统{% endblock %}

{% block content %}
<style>
    .achievements-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        min-height: 100vh;
    }
    
    .achievements-header {
        background: rgba(255, 255, 255, 0.95);
        border-radius: 15px;
        padding: 30px;
        margin-bottom: 30px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        text-align: center;
    }
    
    .achievements-header h1 {
        margin: 0 0 15px 0;
        color: #333;
        font-size: 2.5em;
    }
    
    .achievement-stats {
        display: flex;
        justify-content: center;
        gap: 40px;
        margin-top: 20px;
    }
    
    .stat-item {
        text-align: center;
    }
    
    .stat-value {
        font-size: 2em;
        font-weight: bold;
        color: #667eea;
        display: block;
    }
    
    .stat-label {
        color: #666;
        margin-top: 5px;
    }
    
    .achievement-section {
        background: rgba(255, 255, 255, 0.95);
        border-radius: 15px;
        padding: 25px;
        margin-bottom: 25px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    }
    
    .section-title {
        margin: 0 0 20px 0;
        color: #333;
        border-bottom: 2px solid #667eea;
        padding-bottom: 10px;
        font-size: 1.5em;
    }
    
    .achievements-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 20px;
    }
    
    .achievement-card {
        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        border-radius: 12px;
        padding: 20px;
        transition: all 0.3s ease;
        border: 2px solid transparent;
        position: relative;
        overflow: hidden;
    }
    
    .achievement-card.achieved {
        background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
        border-color: #ff9800;
        transform: scale(1.02);
    }
    
    .achievement-card.achieved::before {
        content: '✓';
        position: absolute;
        top: 10px;
        right: 10px;
        background: #4CAF50;
        color: white;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 14px;
    }
    
    .achievement-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    }
    
    .achievement-card.achieved:hover {
        transform: scale(1.02) translateY(-5px);
    }
    
    .achievement-icon {
        font-size: 3em;
        text-align: center;
        margin-bottom: 15px;
        display: block;
    }
    
    .achievement-name {
        font-size: 1.2em;
        font-weight: bold;
        color: #333;
        margin-bottom: 10px;
        text-align: center;
    }
    
    .achievement-description {
        color: #666;
        text-align: center;
        font-size: 0.9em;
        line-height: 1.4;
        margin-bottom: 15px;
    }
    
    .achievement-reward {
        background: rgba(102, 126, 234, 0.1);
        border: 1px solid #667eea;
        border-radius: 20px;
        padding: 8px 15px;
        text-align: center;
        font-size: 0.85em;
        color: #667eea;
        font-weight: bold;
    }
    
    .achievement-card.achieved .achievement-reward {
        background: rgba(76, 175, 80, 0.1);
        border-color: #4CAF50;
        color: #4CAF50;
    }
    
    .back-btn {
        background: #667eea;
        color: white;
        border: none;
        padding: 12px 25px;
        border-radius: 25px;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
        transition: all 0.3s ease;
        text-decoration: none;
        display: inline-block;
        margin-bottom: 20px;
    }
    
    .back-btn:hover {
        background: #5a6fd8;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        color: white;
        text-decoration: none;
    }
    
    .progress-bar {
        background: #e0e0e0;
        border-radius: 10px;
        height: 8px;
        overflow: hidden;
        margin-top: 10px;
    }
    
    .progress-fill {
        background: linear-gradient(90deg, #667eea, #764ba2);
        height: 100%;
        border-radius: 10px;
        transition: width 0.3s ease;
    }
    
    .no-achievements {
        text-align: center;
        color: #999;
        font-style: italic;
        padding: 40px;
        font-size: 1.1em;
    }
    
    .achievement-type-badge {
        display: inline-block;
        background: #667eea;
        color: white;
        padding: 4px 12px;
        border-radius: 15px;
        font-size: 0.8em;
        font-weight: bold;
        margin-bottom: 15px;
    }
    
    @media (max-width: 768px) {
        .achievements-grid {
            grid-template-columns: 1fr;
        }
        
        .achievement-stats {
            flex-direction: column;
            gap: 20px;
        }
        
        .achievements-header h1 {
            font-size: 2em;
        }
    }
</style>

<div class="achievements-container">
    <a href="{% url 'accounts:personal_space' %}" class="back-btn">← 返回个人空间</a>
    
    <!-- 成就系统头部 -->
    <div class="achievements-header">
        <h1>🏆 成就系统</h1>
        <p style="color: #666; margin: 10px 0;">收集成就，展示你的实力与荣誉！</p>
        
        <div class="achievement-stats">
            <div class="stat-item">
                <span class="stat-value">{{ achieved_count }}</span>
                <div class="stat-label">已获得成就</div>
            </div>
            <div class="stat-item">
                <span class="stat-value">{{ total_achievements }}</span>
                <div class="stat-label">总成就数</div>
            </div>
            <div class="stat-item">
                <span class="stat-value">{% widthratio achieved_count total_achievements 100 %}%</span>
                <div class="stat-label">完成度</div>
            </div>
        </div>
        
        <div class="progress-bar">
            <div class="progress-fill" style="width: {% widthratio achieved_count total_achievements 100 %}%"></div>
        </div>
    </div>
    
    <!-- 成就分类展示 -->
    {% for achievement_type, achievements in achievements_by_type.items %}
        <div class="achievement-section">
            <h2 class="section-title">
                {% if achievement_type == 'battle' %}
                    ⚔️ 战斗成就
                {% elif achievement_type == 'level' %}
                    📈 等级成就
                {% elif achievement_type == 'social' %}
                    👥 社交成就
                {% elif achievement_type == 'special' %}
                    ⭐ 特殊成就
                {% else %}
                    🎯 {{ achievement_type|title }} 成就
                {% endif %}
            </h2>
            
            {% if achievements %}
                <div class="achievements-grid">
                    {% for achievement in achievements %}
                        <div class="achievement-card {% if achievement.is_achieved %}achieved{% endif %}">
                            <div class="achievement-type-badge">
                                {% if achievement.achievement_type == 'battle' %}
                                    战斗
                                {% elif achievement.achievement_type == 'level' %}
                                    等级
                                {% elif achievement.achievement_type == 'social' %}
                                    社交
                                {% elif achievement.achievement_type == 'special' %}
                                    特殊
                                {% else %}
                                    {{ achievement.achievement_type|title }}
                                {% endif %}
                            </div>
                            
                            <div class="achievement-icon">{{ achievement.icon|default:"🏆" }}</div>
                            <div class="achievement-name">{{ achievement.name }}</div>
                            <div class="achievement-description">{{ achievement.description }}</div>
                            
                            {% if achievement.exp_reward > 0 %}
                                <div class="achievement-reward">
                                    {% if achievement.is_achieved %}
                                        已获得 {{ achievement.exp_reward }} 经验值
                                    {% else %}
                                        奖励 {{ achievement.exp_reward }} 经验值
                                    {% endif %}
                                </div>
                            {% endif %}
                        </div>
                    {% endfor %}
                </div>
            {% else %}
                <div class="no-achievements">该分类暂无成就</div>
            {% endif %}
        </div>
    {% empty %}
        <div class="achievement-section">
            <div class="no-achievements">
                <h3>暂无成就</h3>
                <p>成就系统正在建设中，敬请期待！</p>
            </div>
        </div>
    {% endfor %}
</div>

<script>
// 成就卡片动画效果
document.addEventListener('DOMContentLoaded', function() {
    const achievementCards = document.querySelectorAll('.achievement-card');
    
    // 添加进入动画
    achievementCards.forEach((card, index) => {
        card.style.opacity = '0';
        card.style.transform = 'translateY(20px)';
        
        setTimeout(() => {
            card.style.transition = 'all 0.5s ease';
            card.style.opacity = '1';
            card.style.transform = 'translateY(0)';
        }, index * 100);
    });
    
    // 点击效果
    achievementCards.forEach(card => {
        card.addEventListener('click', function() {
            if (this.classList.contains('achieved')) {
                // 已获得成就的特殊效果
                this.style.transform = 'scale(1.05)';
                setTimeout(() => {
                    this.style.transform = '';
                }, 200);
            }
        });
    });
});
</script>
{% endblock %}